<template>
  <!-- 友情链接 -->
  <div id="link" v-if="links.length > 0">
    <el-divider content-position="left">
      <i class="el-icon-s-promotion">友情链接</i>
    </el-divider>
    <el-tag :type="item.type" v-for="item in links" :key="item.id" :disable-transitions="true"
      class="link-item-content">
      <el-tooltip class="item" effect="light" :content="item.name" placement="top">
        <div slot="content">{{ item.name }}<br />{{ item.address }}</div>
        <el-link :underline="false" :type="item.type" :href="item.address" target="_blank">
          {{ item.name | ellipsis(3) }}
        </el-link>
      </el-tooltip>
    </el-tag>
  </div>
</template>

<script>
import {
    linkQueryList
} from '@/api/system'

export default {
    name: 'rank',
    data () {
        return {
            links: []
        }
    },
    filters: {
        ellipsis (value, count) {
            if (!value) return ''
            if (value.length > count) {
                return value.slice(0, count) + '...'
            }
            return value
        }
    },
    methods: {},
    mounted () {
        linkQueryList().then((response) => {
            if (response.code === 200) {
                this.links = response.data
            }
        })
    }
}
</script>

<style scoped>
#link {
  width: auto;
  height: 100%;
  padding: 0px 0px 10px 0px;
  background-color: #fff;
}

.link-item-content {
  font-size: 12px;
  width: 70px;
  text-align: center;
  margin: 5px 5px 5px 5px;
}
</style>
